<template>
	<view class="container">
		<view class="view1">
			<view class="bdc" @click="remberWords()">
				背单词
			</view>
			<view class="tuijian">
				<view class="con">
					<image src="../../static/img/index/coffe.png"></image>
				</view>
				<view class="con">
					<text>每日推荐</text>
				</view>
			</view>
		</view>
		<view class="view2">
			<uni-notice-bar background-color="#FCF7C4" show-get-more show-icon
				text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！" @getmore="getMore" />
		</view>

		<view class="view3">
			<view>
				<text>"To be or not to be, that is the
					question." —— Shakespeare
				</text>
			</view>
			<view>
				<text>生存还是毁灭，这是个问题。
					（‌莎士比亚）</text>
			</view>
		</view>


	</view>

</template>

<script setup>
	import store from '@/store/index.js'; //需要引入store

	const ss = ref("hellow")

	function toDemo2() {
		uni.navigateTo({
			url: "/pages/myInfouni/myInfouni"
		})
	}
	const username = computed(() => {
		return store.state.username
	})

	function getMore() {
		console.log("getMore")
	}
	
	function remberWords(){
		console.log("开始背单词")
		uni.navigateTo({
			url:"/pages/recite_words/recite_word_one/recite_word_one"
		})
		
	}


	onLoad(() => {
		// uni.showToast({
		// 	title:"马到成功",
		// 	icon:"error"
		// })
		// uni.showActionSheet({
		// 	itemList: ['A', 'B', 'C'],
		// 	success: function (res) {
		// 		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
		// 	},
		// 	fail: function (res) {
		// 		console.log(res.errMsg);
		// 	}
		// });
	})
</script>

<style lang="scss">
	.container {
		margin-top: 60rpx;
		padding: 0 40rpx;
	}

	.view1 {
		display: flex;
		justify-content: space-between;

		.bdc {
			width: 200rpx;
			height: 200rpx;
			background-color: #efd05a;
			border-radius: 20rpx;
			line-height: 200rpx;
			text-align: center;
			font-size: 50rpx;
		}

		.tuijian {
			width: 400rpx;
			height: 200rpx;
			background-color: lightblue;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;

			.con {
				margin: auto 5rpx;
				font-size: 50rpx;

				image {
					width: 44px;
					height: 60px;
					border-radius: 100rpx;
				}
			}

		}
	}

	.view2 {
		margin: 20rpx 0 0 0;
		border-radius: 10rpx;

	}

	.view3 {
		// width: 370rpx;
		background-color: white;
		// border: 1px solid black;
		border-radius: 10rpx;
		box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

		view{
			text-align: left;
			padding: 20rpx 30rpx;
		}
	}
</style>